<link rel="stylesheet" type="text/css"
      href="<?php echo $vars['url']; ?>mod/klg_theme/views/default/css/jquery.treeview.css"/>
<script type="text/javascript"
        src="<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/js/jquery.treeview.js"></script>
<script type="text/javascript"
        src="<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/js/jquery.treeview.edit.js"></script>
<div class="faq">
    <div class="faq_nav">
        <ul class="faq_filetree browser">
            <!--<li><span class="folder">1.产品说明</span>
                <ul>
                    <li><span class="faq_file">1.1产品介绍</span></li>
                    <li><span class="faq_file">1.2 产品的功能</span></li>
                    <li><span class="faq_file">1.3各版本区别</span></li>
                </ul>
            </li>
            <li><span class="folder">2.使用教程</span>
                <ul>
                    <li><span class="folder">2.1一键安装</span>
                        <ul class="folderOpen">
                            <li><span class="faq_file">2.1一键安装</span></li>
                            <li><span class="faq_file">faq_file 2.1.2</span></li>
                        </ul>
                    </li>
                    <li><span class="faq_file">2.2推荐宝贝</span></li>
                    <li><span class="faq_file">2.3标签管理</span></li>

                </ul>
            </li>
            <li class="closed"><span class="folder">3.安装相关</span>
                <ul>
                    <li><span class="faq_file">3.1各版本接入位置及页面</span></li>
                    <li><span class="faq_file">3.2店铺装修答疑 </span></li>
                    <li><span class="faq_file">3.2店铺装修答疑 </span></li>
                </ul>
            </li>-->
        </ul>
    </div>
    <iframe frameborder="0" scrolling="no" class="faq_frame" src="<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/faq1.1.html" total="1"></iframe>
</div>
<script type="text/javascript">
    jQuery(function($) {
        var faqData = [
            {
                "faq_nav" :"产品说明",
                "expanded":"true",
                "children":
                        [
                            {
                                "faq_nav":"产品介绍",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/faq1.1.html",
                                "anchorURl":"1.1"
                            },
                            {
                                "faq_nav":"产品的功能",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/faq1.2.html",
                                "anchorURl":"1.2"
                            },
                            {
                                "faq_nav":"各版本区别",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/faq1.3.html",
                                "anchorURl":"1.3"
                            }
                        ]
            },
            {
                "faq_nav" :"使用教程",
                "expanded":"true",
                "children":
                        [
                            {
                                "faq_nav":"一键安装",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/flash_install.html",
                                "anchorURl":"install"
                            },
                            {
                                "faq_nav":"推荐宝贝",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/flash_recommend.html",
                                "anchorURl":"recommend"
                            },
                            {
                                "faq_nav":"标签管理",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/flash_control.html",
                                "anchorURl":"control"
                            }
                        ]
            },
            {
                "faq_nav" :"安装相关",
                "expanded":"true",
                "children":
                        [
                            {
                                "faq_nav":"各版本接入位置及页面",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/faq3.1.html",
                                "anchorURl":"3.1"
                            },
                            {
                                "faq_nav":"模板区别：750px、950px、190px",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/faq3.2.html",
                                "anchorURl":"3.2"
                            }
                        ]
            },
            {
                "faq_nav" :"其他",
                "expanded":"true",
                "children":
                        [
                            {
                                "faq_nav":"进入导购",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/faq4.1.html",
                                "anchorURl":"4.1"
                            },
                            {
                                "faq_nav":"升级&续费",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/faq4.2.html",
                                "anchorURl":"4.2"
                            },
                            {
                                "faq_nav":"店铺装修答疑",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/faq4.3.html",
                                "anchorURl":"4.3"
                            }
                        ]
            },
            {
                "faq_nav" :"关于一键",
                "expanded":"true",
                "children":
                        [
                            {
                                "faq_nav":"产品介绍",
                                "faqUrl":"<?php echo $vars['url']; ?>mod/klg_seller/views/default/klg_seller/faq_frame/faq5.1.html",
                                "anchorURl":"5.1"
                            }
                        ]
            }

        ];

        function createFaqList(faqData)
        {
            var indexArray = [], listData = [];
            createListHTML(faqData, indexArray, listData);
            $(".faq_filetree").html(listData.join("")).treeview().click(function(e)
            {
                var obj = $(e.target), faqUrl = obj.attr("faqUrl");
                if(faqUrl){
                    $(".faq_frame").attr("src", faqUrl);
                }
            })
                    .find("a").each(function(){
                        var obj = $(this), href = obj.attr("href");
                        if(href == window.location.hash){
                            obj.closest("ul").prev(".folder").click();
                            obj.click();
                            return false;
                        }
                    });
        }
        function createListHTML(data, indexArray, listData)
        {
            listData.push("<ul>")
            for(var i = 0, len = data.length; i < len; i++){
                var item = data[i], itemClass = "folder";
                if(!item.children){
                    itemClass = "file";
                }
                indexArray.push(i + 1);
                listData.push('<li class="closed"><a href="#', item.anchorURl, '" faqUrl="',item.faqUrl,'" class="', itemClass, '">', indexArray.join(".") + ".", item.faq_nav, '</a>');
                if(item.children){
                    createListHTML(item.children, indexArray, listData);
                }
                listData.push("</li>");
                indexArray.pop();
                //window.location.hash = item.anchorURl
            }
            listData.push("</ul>");

        }

        createFaqList(faqData);
        $(".faq_frame").load(function(){
            this.height = this.contentWindow.document.documentElement.scrollHeight;
        });
    });

</script>